<template>
	<view class="content">
		<view class="title">
			<text class="iconfont icon-shop"></text>
			<text>优购生活馆</text>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toItem(item.goodsId)">
				<text class="iconfont" :class="item.checked ? 'icon-checked' : 'icon-unchecked'" @click.stop="toggleCheck(item)"></text>
				<image :src="item.goods_small_logo" alt="" />
				<view class="right">
					<text class="text-line2">{{ item.goods_name }}</text>
					<view class="btm">
						<text class="price">
							￥
							<text>{{ item.goods_price }}</text>
							.00
						</text>
						<view class="goods-num">
							<button @click.stop="subNum(item, index)">-</button>
							<text>{{ item.num }}</text>
							<button @click.stop="addNum(item)">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="account">
			<view class="select-all" @click="toggleAll">
				<text class="iconfont" :class="isAll ? 'icon-checked' : 'icon-unchecked'"></text>
				<text>全选</text>
			</view>
			<view class="price-wrapper">
				<view class="price">
					<view>
						合计:
						<text class="num">￥{{ totalPrice }}.00</text>
					</view>
					<text class="info">包含运费</text>
				</view>
			</view>
			<view class="account-btn" @click="toPay">结算({{ totalNum }})</view>
		</view>
	</view>
</template>

<script>
const CART_KEY = 'cart';

export default {
	data() {
		return {
			goodsList: []
		};
	},
	computed: {
		totalNum() {
			// 所有勾选的商品数量之和
			// let sum = 0;
			// this.goodsList.forEach(item => {
			// 	// 勾选的商品
			// 	if (item.checked) {
			// 		sum += item.num;
			// 	}
			// });
			// return sum;

			return this.goodsList.reduce((sum, item) => {
				return sum + (item.checked ? item.num : 0);
			}, 0);
		},
		// 总价格
		totalPrice() {
			return this.goodsList.reduce((sum, item) => {
				return sum + (item.checked ? item.num * item.goods_price : 0);
			}, 0);
		},
		// 全选勾选的判断
		isAll: {
			get() {
				//所有的商品都勾选，全选勾选.勾选的商品数量===商品数量
				// let sum = 0
				// this.goodsList.forEach(item=>{
				// 	// 商品勾选,sum++
				// 	if(item.checked){
				// 		sum++
				// 	}
				// })

				// if(sum===this.goodsList.length){
				// 	return true
				// }
				// return false

				//有一个商品没有勾选，直接返回false;如果最终都没有返回false的话，那就返回true
				// this.goodsList.forEach(item=>{
				// 	if(!item.checked){
				// 		return false
				// 	}
				// })
				// return true

				// for(let item of this.goodsList){
				// 	// 如果有一个商品没有勾选,那么就返回false
				// 	if(!item.checked){
				// 		return false
				// 	}
				// }
				// return true

				// 所有的商品都勾选，全选勾选
				return this.goodsList.every(item => {
					return item.checked;
				});
			},
			set(status) {
				// status就是this.isAll设置的值
				console.log(status);
				//把status状态设置给所有商品
				this.goodsList.forEach(item => {
					item.checked = status;
				});
			}
		}
	},
	watch: {
		goodsList: {
			handler() {
				console.log(this.goodsList);
				let cart = this.goodsList.map(item => {
					return {
						goodsId: item.goodsId,
						checked: item.checked,
						num: item.num
					};
				});
				this.$store.commit('updateCart',cart)
			},
			// 深度侦听
			deep: true
		}
	},
	onShow() {
		// this.storageCartArr = uni.getStorageSync(CART_KEY) || [];
		this.storageCartArr = this.$store.state.cart
		this.goodsList = []; //发请求之前，统一对goodsList重置
		// 发请求了
		this.queryGoodsList();
	},
	methods: {
		toPay() {
			// 如果商品数量为0,提示
			if (!this.totalNum) {
				uni.showToast({
					title: '请添加商品',
					icon: 'none'
				});
				return;
			}

			let token = uni.getStorageSync('token');
			// 如果没有登录,跳转登录页面
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return;
			}

			uni.navigateTo({
				url: '/pages/pay/pay'
			});
		},
		// 全选的勾选/不勾选
		toggleAll() {
			// 改变计算属性isAll,需要isAll提供set方法
			this.isAll = !this.isAll;
		},
		// 商品数量+1
		addNum(item) {
			item.num++;
		},
		// 商品数量-1
		subNum(item, index) {
			// 如果数量是1,弹框确认删除
			if (item.num === 1) {
				uni.showModal({
					title: '提示',
					content: '你确认要删除吗？',
					success: res => {
						if (res.confirm) {
							// 删除指定项
							this.goodsList.splice(index, 1);
						}
					}
				});
				return;
			}
			item.num--;
		},
		// 跳转商详
		toItem(goodsId) {
			uni.navigateTo({
				url: '/pages/item/item?goodsId=' + goodsId
			});
		},
		toggleCheck(item) {
			item.checked = !item.checked;
		},
		// 获取购物车商品列表
		async queryGoodsList() {
			//取storage cart里面每一项goodsId以,拼接
			// let idStr = ''
			// storageCartArr.forEach(item=>{
			// 	idStr+=item.goodsId+','
			// })
			// console.log(idStr)
			// 如果storage cart是空数组,没必要发请求
			if (!this.storageCartArr.length) {
				return;
			}

			//构造goodsId数组，然后join
			let goodsIdArr = this.storageCartArr.map(item => {
				return item.goodsId;
			});

			let idStr = goodsIdArr.join(',');

			let _goodsList = await this.$request({
				url: '/api/public/v1/goods/goodslist?goods_ids=' + idStr
			});

			// storageCartArr和_goodsList合并,以storageCartArr为主
			this.goodsList = this.storageCartArr.map(storageGoods => {
				// storageGoods.goodsId去_goodsList里面找一项goods_id相等那一项, storageGoods和找到的对象进行合并
				let targetGoods = _goodsList.find(item => {
					return item.goods_id === storageGoods.goodsId;
				});
				// 注意点,这里是对象
				return { ...storageGoods, ...targetGoods };
			});
		}
	}
};
</script>

<style lang="less">
.iconfont {
	font-size: 44rpx;
}

.title {
	height: 88rpx;
	display: flex;
	align-items: center;

	.iconfont {
		color: #999;
		margin: 6rpx 12rpx 0 32rpx;
	}
}

.goods-item {
	height: 206rpx;
	background-color: #fff;
	border-top: 1rpx solid #ddd;
	display: flex;
	box-sizing: border-box;
	align-items: center;

	.iconfont {
		color: #eb4450;
		margin: 0 30rpx;
	}

	image {
		width: 160rpx;
		height: 160rpx;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin: 0 20rpx 0 18rpx;

		.btm {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-between;

			.price {
				color: #eb4450;
				display: flex;

				> text {
					font-size: 24px;
				}
			}

			.goods-num {
				display: flex;
				align-items: center;

				button {
					width: 60rpx;
					height: 50rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 4rpx solid #666;
				}

				text {
					margin: 0 30rpx;
				}
			}
		}
	}
}

.goods-list {
	position: absolute;
	bottom: 98rpx;
	top: 88rpx;
	width: 100%;
	overflow: auto;
	padding-bottom: 60rpx;
	background-color: #f4f4f4;
}

.account {
	height: 98rpx;
	border-bottom: 1rpx solid #ddd;
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;

	.iconfont {
		color: #eb4450;
		margin: 0 30rpx;
	}

	.account-btn {
		width: 230rpx;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #eb4450;
	}

	.select-all {
		flex: 1;
		display: flex;
		align-items: center;
		.price-wrapper {
			display: flex;
			flex: 1;
			justify-content: flex-end;
			align-items: center;
		}
	}

	.price {
		margin-right: 20rpx;

		.num {
			color: #eb4450;
		}

		.info {
			color: #999;
		}
	}
}
</style>
